<template>
	<zero-custom-bar :effect="false" color="#fff" title='车搭档'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" :singleIcon="true">
	</zero-custom-bar>
	<view class="box">
		<image src="/static/icon8.png" class="icon8" mode=""></image>
		<view class="content">
			<image src="" class="avatar" mode=""></image>
			<view class="center">
				<view class="top">
					<text>辽A·122AR</text>
					<image src="/static/icon9.png" class="icon9" mode=""></image>
				</view>
				<view class="bottom">
					<text>车检截止>1年</text>
					<text>车险截止 34天</text>
				</view>
			</view>
			<image src="/static/edit.png" class="edit" mode=""></image>
		</view>
	</view>
	<view class="tabs">
		<view class="">
			<image src="../../static/icon1.png" mode=""></image>
			<text>年检代办</text>
		</view>
		<view class="">
			<image src="../../static/icon2.png" mode=""></image>
			<text>品牌保养</text>
		</view>
		<view class="">
			<image src="../../static/icon3.png" mode=""></image>
			<text>特惠洗车</text>
		</view>
		<view class="">
			<image src="../../static/icon4.png" mode=""></image>
			<text>代驾服务</text>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #FFFFFF 49%) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.box{
		width: 702rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 62rpx auto 47rpx;
		overflow: hidden;
		position: relative;
		.icon8{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			.avatar{
				width: 118rpx;
				height: 118rpx;
				border-radius: 50%;
				background: #FFE8C1;
				margin: 45rpx 14rpx 0 40rpx;
			}
			.center{
				margin-top: 66rpx;
				.top{
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					text{
						font-weight: bold;
						font-size: 40rpx;
						color: #222222;
					}
					image{
						display: block;
						width: 60rpx;
						height: 36rpx;
						margin-left: 13rpx;
					}
				}
				.bottom{
					display: flex;
					text{
						font-size: 24rpx;
						color: #5F5F5F;
						display: block;
						margin-right: 50rpx;
					}
				}
				
			}
			.edit{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top:31rpx;
				right: 35rpx;
			}
		}
	}

	.tabs {
		width: 640rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				display: block;
				width: 82rpx;
				height: 82rpx;
				margin-bottom: 8rpx;
			}
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #16191B;
			}
		}
	}
</style>
